@extends('layouts.app')

@section('title', '卡券订单')

@section('css-import')
<link href="{{config('app.inlet_src')}}/assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
@endsection

@section('css-write')
<style type="text/css">
	.page-s{
		float:right;
		display: inline-block;
		padding-bottom: 0px;
		margin: 29px 9px;
		border-radius: 4px;
	}
</style>
@endsection

@section('content-fluid')

<div class="row">
	<!-- BASIC TABLE -->
	<div class="panel">
		<div class="panel-heading">
			<h3 class="panel-title">卡券订单</h3>
		</div>
		<div class="panel-body">
			<ul class="nav nav-pills" style="float:left;">
			  <li role="presentation" class="yizhifu"><a href="/coupon/order/list?pay_state=1">已支付</a></li>
			  <li role="presentation" class="weizhifu"><a href="/coupon/order/list?pay_state=0">未支付</a></li>
			  <li role="presentation" class="orderall"><a href="/coupon/order/list">全部</a></li>
			</ul>
			<div class="input-group date form_datetime col-md-2" data-date="{{date('Y-m-d H:i')}}" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" style="float:left; margin-left:25px;">
			    <input class="form-control" size="16" type="text" value="{{$_GET['starttime'] ?? ''}}" name="starttime" placeholder="筛选从...开始" readonly>
			    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
			</div>
			<div class="input-group date form_datetime col-md-2" data-date="{{date('Y-m-d H:i')}}" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" style="float:left; margin-left:20px;">
			    <input class="form-control" size="16" type="text" value="{{$_GET['endtime'] ?? ''}}" placeholder="筛选到...结束" name="endtime" readonly>
			    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
			</div>
			<table class="table table-hover">
				<thead>
					<tr>
						<th>#</th>
						<th>订单号</th>
						<th>下单用户</th>
						<th>卡券名称</th>
						<th>消费金额</th>
						<th>下单时间</th>
						<th>订单状态</th>
					</tr>
				</thead>
				<tbody>
					@foreach($orders as $k=>$v)
					<tr>
						<td>{{$v->id}}</td>
						<td>{{$v->order_number}}</td>
						<td>{{$v->nickname ?? '未填写'}}</td>
						<td>{{$v->coupon_name}}</td>
						<td>{{$v->price}} 元</td>
						<td>{{$v->created_at}}</td>
						<td>{{$v->pay_state_text}}</td>
					</tr>
					@endforeach
				</tbody>
			</table>
			{{ $orders->appends(['starttime' => $_GET['starttime']??'','endtime'=>$_GET['endtime']??'','pay'=>$_GET['pay']??''])->links() }} 
			<div class="page-s">本页共{{ $orders->count() }}条</div>
			<div class="page-s">共{{ $orders->total() }}条</div>
			<div class="page-s">当前第{{ $orders->currentPage() }}页</div>
			<div class="page-s">共{{ $orders->lastPage() }}页</div>
		</div>
	</div>
	<!-- END BASIC TABLE -->
</div>
@endsection

@section('js-import')
<script src="{{config('app.inlet_src')}}/assets/scripts/bootstrap-datetimepicker.js"></script>
<script src="{{config('app.inlet_src')}}/assets/scripts/bootstrap-datetimepicker.zh-CN.js"></script>
@endsection

@section('js-write')
<script type="text/javascript">
	
    $('.form_datetime').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1
    });
	var pay = getQueryString('pay_state');
	if(pay){
		if(pay==1){
			$('.yizhifu').addClass('active');
		}else if(pay==0){
			$('.weizhifu').addClass('active');
		}
	}else{
		$('.orderall').addClass('active');
	}
	var im = 0;
	var ie = 0;
	var u = '/coupon/order/list';
	$('input[name="starttime"]').change(timeEdit);
	$('input[name="endtime"]').change(timeEdit);
	function timeEdit(){
		var end_v = $('input[name="endtime"]').val();
		var start_v = $('input[name="starttime"]').val();
		if($(this).attr('name')=='starttime'){
			im += 1;
		}
		if($(this).attr('name')=='endtime'){
			ie += 1;
		}
		if(ie>0 && im>0){
			if(pay){
				location.href = u+'?pay='+pay+'&starttime='+start_v+'&endtime='+end_v;
			}else{
				location.href = u+'?starttime='+start_v+'&endtime='+end_v;
			}
		}
	}
</script>
@endsection
